<template>
  <el-select
      v-model="value"
      multiple
      clearable
      collapse-tags
      placeholder="Select"
      popper-class="custom-header"
      :max-collapse-tags="1"
      style="width: 240px"
  >
    <template #header>
      <el-checkbox
          v-model="checkAll"
          :indeterminate="indeterminate"
          @change="handleCheckAll"
      >
        All
      </el-checkbox>
    </template>
    <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref, watch } from 'vue';

const checkAll = ref(false);
const indeterminate = ref(false);
const value = ref([]);
const cities = ref([{
  value: 'Beijing',
  label: 'Beijing'
}, {
  value: 'Shanghai',
  label: 'Shanghai'
}, {
  value: 'Nanjing',
  label: 'Nanjing'
}, {
  value: 'Chengdu',
  label: 'Chengdu'
}, {
  value: 'Shenzhen',
  label: 'Shenzhen'
}, {
  value: 'Guangzhou',
  label: 'Guangzhou'
}]);

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === cities.value.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val) => {
  indeterminate.value = false;
  if (val) {
    value.value = cities.value.map((_) => _.value);
  } else {
    value.value = [];
  }
};
</script>

<style>
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}
</style>
